<script setup>import { ref, onMounted } from 'vue'
import http from '@/utils/http'

const sectionRefs = {}
const flashKey = ref(null)
const fullData = ref([])

const scrollTo = (key) => {
  const target = sectionRefs[key]
  if (target) {
    target.scrollIntoView({ behavior: 'smooth', block: 'start' })
    flashKey.value = key
  }
}
const clearFlash = () => {
  flashKey.value = null
}

onMounted(async () => {
  try {
    const res = await http.get('products/')
    const products = res.data
    // console.log("res.data",res.data)

    // 分组逻辑：按 CategoryName 分组
    const grouped = {}
    for (const p of products) {
      // console.log("p",p.Category.CategoryName)
      const category = p.Category.CategoryName
      if (!grouped[category]) {
        grouped[category] = []
      }
      grouped[category].push(p)
    }

    // 转换为 fullData 格式
    fullData.value = Object.entries(grouped).map(([key, items]) => ({
      key: key.toLowerCase().replace(/\s+/g, '-'),
      name: key,
      products: items
    }))
    console.log("fullData:",fullData.value[0].products[0].ImageURL)
  } catch (err) {
    console.error('获取产品失败', err)
  }
})
</script>

<template>
  <section class="product-page">
    <!-- 左侧导航 -->
    <aside class="left-nav">
  <div
    class="nav-block"
    v-for="group in fullData"
    :key="group.key"
  >
    <h3>{{ group.name }}</h3>
    <ul class="product-list">
      <li
        v-for="item in group.products"
        :key="item.ProductID"
        class="product-item"
        @click="scrollTo(group.key)"
      >
      {{ item.ProductName }}
      </li>
    </ul>
  </div>
</aside>

    <!-- 右侧内容 -->
    <main class="right-panel">
      <section
        v-for="(group) in fullData"
        :key="group.key"
        :ref="el => sectionRefs[group.key] = el"
        class="group-section"
        :class="{ flash: flashKey === group.key }"
        @animationend="clearFlash"
      >
        <h2 class="group-title">{{ group.name }}</h2>
        <ul class="product-list">
          <li v-for="(item, j) in group.products" :key="j" class="product-item">
            <img :src="item.ImageURL" alt="product" class="product-img" />
            <span class="product-name">{{ item.ProductName }}</span>
          </li>
        </ul>
      </section>
    </main>
  </section>
</template>

<style scoped>
.product-page {
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
  gap: 40px;
  font-family: 'Helvetica Neue', sans-serif;
}

/* 左侧导航 */
.left-nav {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 80px;
  padding-right: 20px;
  border-right: 1px solid #eee;
}
.nav-block {
  margin-bottom: 32px;
}
.nav-block h3 {
  font-size: 16px;
  font-weight: bold;
  color: #2c2c2c;
  margin-bottom: 16px;
}
.nav-block ul {
  list-style: none;
  padding-left: 0;
}
.nav-block li {
  font-size: 14px;
  padding: 6px 0;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}
.nav-block li:hover {
  color: #d2691e;
  font-weight: 500;
}

/* 右侧内容 */
.right-panel {
  flex: 1;
}

.group-section {
  margin-bottom: 60px;
}
.group-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #4a2e18;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.left-nav .product-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 产品列表样式 */
.right-panel .product-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  justify-content: space-around;
  justify-content:flex-start;
  flex-direction: row;
  gap: 25px;
  flex-wrap: wrap;
}
.product-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 200px;
}

.product-item:hover {
  background-color: #fdf6f0; /* 柔和的米色高亮 */
  transform: translateY(-2px); /* 轻微上浮 */
  transition: all 0.2s ease;
  border-radius: 20px;
}
.product-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 100%;
  margin-right: 16px;
}
.product-name {
  font-size: 15px;
  font-weight: 400;
  color: #4a4a4a;
}

/* 高亮动画 */
.group-section.flash {
  animation: highlightFlash 1s ease;
}
@keyframes highlightFlash {
  0% {
    background-color: #fff5e9;
  }
  100% {
    background-color: transparent;
  }
}

</style>
